@charset "utf-8";
@import 'reset';
$fontSize:40;
@function r($p) {
    @return $p/$fontSize*1rem;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.web{
    width: r(640);
    height: 100%;
    overflow: hidden;
    position: relative;
}
        header {
            position: absolute;
            .top {
                ul {
                    width: r(640);
                    height: r(75);
                    border-bottom: 1px solid #A7A7A7;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    li {
                        display: flex;
                        align-items: center;
                        font-size: r(30);
                        color: #343434;
                        a {
                            display: flex;
                            align-items: center;
                            margin: 0 r(29);
                            font-size: r(24);
                            color: #585858;
                            img {
                                height: r(38);
                            }
                        }
                    }
                    .con{
                        margin: 0 auto;
                        transform: translate(-35%);
                    }
                }
                .sea_input{
                width: r(593);
                height: r(50);
                line-height: r(45);
                vertical-align: middle;
                text-align: center;
                background: #F2F2F2;
                border-radius: r(10);
                margin: r(19);
                input{
                    width: r(500);
                    height: r(40);
                    font-size: r(30);
                    vertical-align: middle;
                    text-align: center;
                    background: #F2F2F2;
                    border: none;
                }
            }
            }
            
        }
.conter{
    width: r(640);
    border-top: 1px solid #B2B2B2;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: r(168);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    input{
        display: none;
    }
    .con_lf{
        width:r(170);
        height: 100%;
        position: absolute;
        top: r(1);
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
        li{
            text-align: center;
            font-size: r(26);
            width: r(160);
            height: r(100);
            line-height:r(100) ;
            background: #E5E5E5;
            border-bottom: 1px solid #CCCCCC;  
                      
        }
        label{
            display: block;
            text-align: center;
            font-size: r(26);
            width: r(160);
            height: r(100);
            line-height:r(100) ;
            border-bottom: 1px solid #CCCCCC;
            background: #E5E5E5;
            border-right: 1px solid #CCCCCC;
        }
    }
    #activea:checked~.con_lf>label:first-of-type{
            background: linear-gradient(to right,#000 3%, #fff 3%); 
            border-right:none;
    }
    #activeb:checked~.con_lf>label:nth-of-type(2){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activec:checked~.con_lf>label:nth-of-type(3){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #actived:checked~.con_lf>label:nth-of-type(4){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activee:checked~.con_lf>label:nth-of-type(5){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activef:checked~.con_lf>label:nth-of-type(6){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activeg:checked~.con_lf>label:nth-of-type(7){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activeh:checked~.con_lf>label:nth-of-type(8){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activei:checked~.con_lf>label:nth-of-type(9){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activej:checked~.con_lf>label:nth-of-type(10){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activek:checked~.con_lf>label:nth-of-type(11){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activel:checked~.con_lf>label:nth-of-type(12){
            background: linear-gradient(to right,#000 3%, #fff 3%);
            border-right:none; 
    }
    #activea:checked~ul:first-of-type{
        display: block;
    }
    #activeb:checked~ul:nth-of-type(2){
        display: block;
    }
    #activec:checked~ul:nth-of-type(3){
        display: block;
    }
    #actived:checked~ul:nth-of-type(4){
        display: block;
    }
    #activee:checked~ul:nth-of-type(5){
        display: block;
    }
    #activef:checked~ul:nth-of-type(6){
        display: block;
    }
    .con_rg{
        width: r(460);
        height: 100%;
        position: absolute;
        top: r(2);
        right: 0;
        bottom: 0;
        overflow: auto;
        display: none;
        >li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: r(18) 0;
            >.he_img{
                display: flex;
                align-items: center;
                img{
                    width: r(83);
                }
            }
            .text{
                width: r(357);
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #B2B2B2;
                .te_lf{
                    p{
                        font-size: r(24);
                    }
                    >.ico{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        >li{
                            padding-right: r(34);
                            span{
                                font-size: r(20);
                                color: #A3A3A3;
                                padding-left: r(8);
                            }
                        }
                        >li:first-of-type{
                            img{
                                width: r(28);
                            }
                        }
                        >li:nth-of-type(2){
                            img{
                                width: r(18);
                            }
                        }
                        >li:last-of-type{
                            img{
                                width: r(25);
                            }
                        }
                    }
                }
                .img{
                    padding-right: r(28);
                    img{
                        width: r(25);
                    }
                }
            }
        }
    }
}
//footer{
//  position: absolute;
//  left: 0;
//  bottom: 0;
//  width: r(640);
//  height: r(80);
//}